<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来智慧综合能源管理系统</title>
    <link rel="stylesheet" href="../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../css/svg.css" type="text/css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/iconfonts/iconfont.css">
</head>
<body class="">
<div class="page" id="app">
    <div class="header">
        <div class="header-top">
            <a href="" class="logo icon iconfont icon-logo"></a>
            <div class="title">
                <p>智慧综合能源管理系统</p>
                <span>Smart Integrated Energy Management System</span>
            </div>
            <div class="user-options">
                <span class="user">Admin</span><span class="line">|</span><a href="javascript:void(0)">注销</a>
            </div>
            <div class="top-notice">
                <ul>
                    <li><a href="">1头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动1</a></li>
                    <li><a href="">2头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动12</a></li>
                    <li><a href="">3头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动13</a></li>
                </ul>
            </div>
            <div class="main-menu">
                <p class="date">2017年4月3日 星期一 15:30</p>
                <ul>
                    <li class="active"><a href=""><i class="icon iconfont icon-water"></i><span>水</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-elec"></i><span>电</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-gass"></i><span>气</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-mei"></i><span>煤</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-swz"></i><span>生物质</span></a></li>
                </ul>
            </div>
        </div>
        <div class="header-bottom">
            <a href="#" class="home"><i class="icon iconfont icon-home"></i></a>
            <div class="bread-thumb">
                <span>用能分析</span>
                <i class="icon iconfont icon-arroow"></i>
                <span>对比分析</span>
            </div>
            <div class="rbg"></div>
            <div class="menu">
                <a href="javascript:void(0)" class="prev-menu-btn icon iconfont icon-btn-close"></a>
                <div class="menu-box">
                    <div class="menu-wrapper">
                        <ul class="menu-leave1">
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jbxx"></i><span>基本信息</span></a></li>
                            <li>
                                <a href="yngl.html"><i class="icon iconfont icon-yngl"></i><span>用能概览</span></a>
                            </li>
                            <li class="active"><a href=""><i class="icon iconfont icon-gjfx"></i><span>用能分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>高级分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>节能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>报表中心</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-bjgl"></i><span>报警管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>计费管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-sbgl"></i><span>重点设备管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>车间用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>工艺用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>产品用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能看板</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>用能维护</span></a></li>
                        </ul>
                    </div>
                    <div class="sub-menu">
                        <div class="inner">
                            <ul>
                                <li>
                                    <a href="Profile.html">企业简介</a>
                                    <span>|</span>
                                    <a href="Agency.html">能源机构管理</a>
                                    <span>|</span>
                                    <a href="System.html">能源管理制度</a>
                                    <span>|</span>
                                    <a href="Engineer.html">工程师资源</a>
                                    <span>|</span>
                                    <a href="Assets.html">计量器具管理</a>
                                    <span>|</span>
                                    <a href="nywlt.html">能源网络图</a>
                                    <span>|</span>
                                    <a href="nylxt.html">能源流向图</a>
                                </li>
                                <li></li>
                                <li>
                                    <a href="data-query.html">数据查询</a>
                                    <span>|</span>
                                    <a href="ynzj.html">用能足迹</a>
                                    <span>|</span>
                                    <a href="jbfx.html">基本分析</a>
                                    <span>|</span>
                                    <a class="active" href="index.html">对比分析</a>
                                    <span>|</span>
                                    <a href="pmtj.html">排名统计</a>
                                </li>
                                <li>
                                    <a href="cbfx.html">成本分析</a>
                                    <span>|</span>
                                    <a href="shfx.html">损耗分析</a>
                                    <span>|</span>
                                    <a href="fhfx.html">负荷分析</a>
                                    <span>|</span>
                                    <a href="xlfx.html">需量分析</a>
                                    <span>|</span>
                                    <a class="active" href="hjfx.html">环境分析</a>
                                    <span>|</span>
                                    <a href="ycfx.html">预测分析</a>
                                </li>
                                <li>
                                    <a href="jzfx.html">基准分析</a>
                                    <span>|</span>
                                    <a href="ynpg.html">用能评估</a>
                                    <span>|</span>
                                    <a href="zbfx.html">指标分析</a>
                                </li>
                                <li>
                                    <a  href="Report.html">单点报表</a>
                                    <span>|</span>
                                    <a href="jxwbb.html">经信委报表</a>
                                </li>
                                <li>
                                    <a  href="txbj.html">通讯故障</a>
                                    <span>|</span>
                                    <a href="ycbj.html">异常数据</a>
                                    <span>|</span>
                                    <a href="qtbj.html">设备启停</a>
                                    <span>|</span>
                                    <a href="debj.html">超定额报警</a>
                                    <span>|</span>
                                    <a href="gybj.html">工艺控制报警（生产）</a>
                                    <a href="Report.html">单点报表</a>
                                </li>
                                <li>
                                    <a href="jfsz.html">计费设置</a>
                                    <span>|</span>
                                    <a href="dbkh.html">电表开户</a>
                                    <span>|</span>
                                    <a href="khgl.html">客户管理</a>
                                    <span>|</span>
                                    <a href="dyfy.html">当月费用</a>
                                    <span>|</span>
                                    <a href="lszd.html">历史账单</a>
                                </li>
                                <li>
                                    <a href="ssjk.html">实时监测</a>
                                    <span>|</span>
                                    <a href="sbynfx.html">设备用能分析</a>
                                    <span>|</span>
                                    <a href="sbclsr.html">设备产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="sbdepz.html">设备定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="sbnxdb.html">设备能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="sbzhnxqs.html">设备综合能效趋势（生产）</a>
                                    <span>|</span>
                                    <a href="sbnhbb.html">设备能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qynhsj.html">企业能耗数据（生产）</a>
                                    <span>|</span>
                                    <a href="cpcltj.html">产品产量统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhtj.html">产品单耗统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhbb.html">产品单耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cjdepz.html">车间定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cjnxdb.html">车间能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cjzhnhqs.html">车间综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cjnhbb.html">车间能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="gyjbxx.html">工艺基本信息（生产）</a>
                                    <span>|</span>
                                    <a href="gyclsr.html">工艺产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="gydepz.html">工艺定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="gynxdb.html">工艺能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="gynhbb.html">工艺能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cpdepz.html">产品定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cpnxdb.html">产品能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cpzhnhqs.html">产品综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cpnhbb.html">产品能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qykb.html">企业看板（生产）</a>
                                    <span>|</span>
                                    <a href="cjkb.html">车间看板（生产）</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a href="javascript:void(0)" class="next-menu-btn icon iconfont icon-btn-open"></a>

            </div>
            <div class="lbg"></div>
        </div>
    </div>
    <div class="content">
        <div class="extend">
            <div class="zTreeDemoBackground left">
                <div class="search-box">
                    <input type="text" class="search-ipt" ref="ztreesearch">
                    <input type="button" value="搜索" class="search-btn" @click="searchNode">
                </div>
                <ul id="treeDemo" class="ztree"></ul>
                <!--<ul id="code" class="log" style="height:20px;"></ul>-->
                <svg v-show="ztreeLoadingFlag" id="ztree-loading" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="circle" class="g-circles g-circles--v1">
                        <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                                cy="16.6987298" r="10"></circle>
                        <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                                cx="16.6987298" cy="35" r="10"></circle>
                        <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                                r="10"></circle>
                        <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                                cx="16.6987298" cy="85" r="10"></circle>
                        <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                                cx="35" cy="103.30127" r="10"></circle>
                        <circle id="7" cx="60" cy="110" r="10"></circle>
                        <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                                cx="85" cy="103.30127" r="10"></circle>
                        <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                                cx="103.30127" cy="85" r="10"></circle>
                        <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                                r="10"></circle>
                        <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                                cx="103.30127" cy="35" r="10"></circle>
                        <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                                cy="16.6987298" r="10"></circle>
                        <circle id="1" cx="60" cy="10" r="10"></circle>
                    </g>

                    <use xlink:href="#circle" class="use"/>
                </svg>

            </div>
            <ul style="display: none;">
                <li><p>父子关联关系：<br/>
                    被勾选时：<input type="checkbox" id="py" class="checkbox first" checked/><span>关联父</span>
                    <input type="checkbox" id="sy" class="checkbox first" checked/><span>关联子</span><br/>
                    取消勾选时：<input type="checkbox" id="pn" class="checkbox first" checked/><span>关联父</span>
                    <input type="checkbox" id="sn" class="checkbox first" checked/><span>关联子</span><br/>
                    <ul id="code" class="log" style="height:20px;"></ul>
                    </p>
                </li>
            </ul>
            <div class="extend-btn"><i class="icon iconfont icon-btn-open"></i></div>
        </div>
        <div class="content-right">
            <div class="panel-hd">
                <span v-for="(item ,$index) in compareText" class="radio-model "
                      :class="{'checked':$index==compareType}" @click="changeCompareType($index)"><i></i><span
                        v-text="item"></span></span>
                <ul class="options range_switch_btns">
                    <!--<li class="btn_on" data-type="day"><a href="javascript:void(0)">日</a></li>-->
                    <!--<li data-type="month"><a href="javascript:void(0)">月</a></li>-->
                    <!--<li data-type="year"><a href="javascript:void(0)">年</a></li>-->
                    <li v-for="(item,$index) in rangType" :class="{btn_on:rangTypeIndex===$index}"
                        @click="changeRangType($index)"><a href="javascript:void(0)" v-text="item"></a></li>
                </ul>
                <p class="noborder "><span>起止时间：</span></p>
                <!--<input type="text"  >-->
                <!--日-->
                <div class="vw_fl" id="datePickerBox0" v-show="rangTypeIndex===0">
                    <div class="more-item mb0">
                        <input v-model="defaultBeginTime" @blur="setDatePickerVmodel('defaultBeginTime')" id="day1"
                               class="Wdate Wdate date_picker_97 from" type="text"
                               onFocus="var day2=$dp.$('day2');WdatePicker({onpicked:function(){day2.focus();},maxDate:'#F{$dp.$D(\'day2\')||\'%y-%M-%d\'}'})"/>
                        <span class="zhi">至</span>
                        <input v-model="defaultEndTime" @blur="setDatePickerVmodel('defaultEndTime')" id="day2"
                               class="Wdate Wdate date_picker_97 to" type="text"
                               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'day1\')}',maxDate:'%y-%M-%d'})"/>
                    </div>
                    <div class="more-range day-more-range" v-show="moreDayArr.length!==3">

                    </div>
                </div>
                <!--月-->
                <div class="vw_fl" id="datePickerBox1" v-show="rangTypeIndex===1">
                    <div class="more-item mb0">
                        <input type="text" class="Wdate Wdate date_picker_97 from" id="month1"
                               onfocus="var month2=$dp.$('month2');WdatePicker({onpicked:function(){month2.focus();},dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/>
                        <span class="zhi">至</span>
                        <input type="text" class="Wdate Wdate date_picker_97 to" id="month2"
                               onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'#F{$dp.$D(\'month1\')}',maxDate:'%y-%M'})"/>
                    </div>
                    <div class="more-range month-more-range" v-show="moreMonthArr.length!==3">

                    </div>
                </div>
                <!--年-->
                <div class="vw_fl" id="datePickerBox2" v-show="rangTypeIndex===2">
                    <div class="more-item mb0">
                        <input type="text" class="Wdate Wdate date_picker_97 from" id="year1"
                               onfocus="var year2=$dp.$('year2');WdatePicker({onpicked:function(){year2.focus();},dateFmt:'yyyy年',minDate:'2008-2',maxDate:'%y'})"/>
                        <span class="zhi">至</span></span>
                        <input type="text" class="Wdate Wdate date_picker_97 to" id="year2"
                               onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'#F{$dp.$D(\'year1\')}',maxDate:'%y'})"/>
                    </div>
                    <div class="more-range year-more-range" v-show="moreYearArr.length!==3">

                    </div>
                </div>
                <!--更多日-->
                <textarea name="" id="moreDay1" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item1">
                        <input id="day3" class="Wdate Wdate date_picker_97 from" type="text"
                               onFocus="var day4=$dp.$('day4');WdatePicker({onpicked:function(){day4.focus();},maxDate:'#F{$dp.$D(\'day4\')||\'%y-%M-%d\'}'})"/>
                    <span class="zhi">至</span>
                    <input id="day4" class="Wdate Wdate date_picker_97 to" type="text"
                           onFocus="WdatePicker({minDate:'#F{$dp.$D(\'day3\')}',maxDate:'%y-%M-%d'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(1)">-</a>
                   </div>
                </textarea>

                <textarea name="" id="moreDay2" class="textarea-hidden" cols="30" rows="10">
                    <div class="more-item more-item2">
                        <input id="day5" class="Wdate Wdate date_picker_97 from" type="text"
                               onFocus="var day6=$dp.$('day6');WdatePicker({onpicked:function(){day6.focus();},maxDate:'#F{$dp.$D(\'day6\')||\'%y-%M-%d\'}'})"/>
                    <span class="zhi">至</span>
                    <input id="day6" class="Wdate Wdate date_picker_97 to" type="text"
                           onFocus="WdatePicker({minDate:'#F{$dp.$D(\'day5\')}',maxDate:'%y-%M-%d'})"/><a
                            href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(2)">-</a>

                    </div>
                </textarea>
                <textarea name="" id="moreDay3" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item3">
                        <input id="day7" class="Wdate Wdate date_picker_97 from" type="text"
                               onFocus="var day8=$dp.$('day8');WdatePicker({onpicked:function(){day8.focus();},maxDate:'#F{$dp.$D(\'day8\')||\'%y-%M-%d\'}'})"/>
                    <span class="zhi">至</span>
                    <input id="day8" class="Wdate Wdate date_picker_97 to" type="text"
                           onFocus="WdatePicker({minDate:'#F{$dp.$D(\'day7\')}',maxDate:'%y-%M-%d'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(3)">-</a>
                   </div>
                </textarea>

                <!--更多月-->
                <textarea name="" id="moreMonth1" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item1">
                        <input type="text" class="Wdate Wdate date_picker_97 from" id="month3"
                               onfocus="var month4=$dp.$('month4');WdatePicker({onpicked:function(){month4.focus();},dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/>
                        <span class="zhi">至</span>
                        <input type="text" class="Wdate Wdate date_picker_97 to" id="month4"
                               onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'#F{$dp.$D(\'month3\')}',maxDate:'%y-%M'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(1)">-</a>
                    </div>
                </textarea>
                <textarea name="" id="moreMonth2" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item2">
                        <input type="text" class="Wdate Wdate date_picker_97 from" id="month5"
                               onfocus="var month6=$dp.$('month6');WdatePicker({onpicked:function(){month6.focus();},dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/>
                        <span class="zhi">至</span>
                        <input type="text" class="Wdate Wdate date_picker_97 to" id="month6"
                               onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'#F{$dp.$D(\'month5\')}',maxDate:'%y-%M'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(2)">-</a>
                    </div>
                </textarea>
                <textarea name="" id="moreMonth3" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item3">
                        <input type="text" class="Wdate Wdate date_picker_97 from" id="month7"
                               onfocus="var month8=$dp.$('month8');WdatePicker({onpicked:function(){month8.focus();},dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/>
                        <span class="zhi">至</span>
                        <input type="text" class="Wdate Wdate date_picker_97 to" id="month8"
                               onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'#F{$dp.$D(\'month7\')}',maxDate:'%y-%M'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(3)">-</a>
                    </div>
                </textarea>

                <!--更多年-->
                <textarea name="" id="moreYear1" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item1">
                       <input type="text" class="Wdate Wdate date_picker_97 from" id="year3"
                              onfocus="var year4=$dp.$('year4');WdatePicker({onpicked:function(){year4.focus();},dateFmt:'yyyy年',minDate:'2008-2',maxDate:'%y'})"/>
                        <span class="zhi">至</span></span>
                       <input type="text" class="Wdate Wdate date_picker_97 to" id="year4"
                              onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'#F{$dp.$D(\'year3\')}',maxDate:'%y'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(1)">-</a>
                    </div>
                </textarea>
                <textarea name="" id="moreYear2" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item2">
                       <input type="text" class="Wdate Wdate date_picker_97 from" id="year5"
                              onfocus="var year6=$dp.$('year6');WdatePicker({onpicked:function(){year6.focus();},dateFmt:'yyyy年',minDate:'2008-2',maxDate:'%y'})"/>
                        <span class="zhi">至</span></span>
                       <input type="text" class="Wdate Wdate date_picker_97 to" id="year6"
                              onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'#F{$dp.$D(\'year5\')}',maxDate:'%y'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(2)">-</a>
                    </div>
                </textarea>
                <textarea name="" id="moreYear3" class="textarea-hidden" cols="30" rows="10">
                   <div class="more-item more-item3">
                       <input type="text" class="Wdate Wdate date_picker_97 from" id="year7"
                              onfocus="var year8=$dp.$('year8');WdatePicker({onpicked:function(){year8.focus();},dateFmt:'yyyy年',minDate:'2008-2',maxDate:'%y'})"/>
                        <span class="zhi">至</span></span>
                       <input type="text" class="Wdate Wdate date_picker_97 to" id="year8"
                              onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'#F{$dp.$D(\'year7\')}',maxDate:'%y'})"/><a
                           href="javascript:void(0)" class="minus-datepicker" onclick="removeRangeItem(3)">-</a>
                    </div>
                </textarea>
                <!--<textarea class="textarea-hidden" id="textarea-day"><input id="type-day" class="Wdate Wdate date_picker_97" type="text" onfocus="WdatePicker({maxDate:'%y-%M-%d'})"/></textarea>-->
                <!-- <textarea class="textarea-hidden" id="textarea-week"><div class=" show-week-wrapper">
                         <input type="text" id="d122_1" class="date_picker_97"/>
                         <input id="type-week" class="Wdate Wdate date_picker_97" type="text" onFocus="WdatePicker({isShowWeek:true,maxDate:'%y-%M-%d',onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('y','yyyy')+'，第'+$dp.cal.getP('W','W')+'周';}})"/></div></textarea>-->
                <!--<textarea class="textarea-hidden" id="textarea-month"><input type="text" class="Wdate Wdate date_picker_97" id="type-month" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/><span class="zhi">至</span><input type="text" class="Wdate Wdate date_picker_97" id="type-month" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})"/><</textarea>

                <textarea class="textarea-hidden" id="textarea-year"><input type="text" class="Wdate Wdate date_picker_97" id="type-year" onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'2008-2',maxDate:'%y'})"/></textarea>
                <textarea class="textarea-hidden" id="textarea-rang">
                    <input id="d4311" class="Wdate Wdate date_picker_97" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'%y-%M-%d\'}'})"/><span class="zhi">至</span><input id="d4312" class="Wdate Wdate date_picker_97" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'%y-%M-%d'})"/>
                </textarea>-->
                <!--<ul class="datepicker-wrapper">
                    <li>
                        <input type="text"><span>至</span><input type="text">
                        <div class="float-datepciker-wrapper">
                            <ul>
                                <li><input type="text"><span>至</span><input type="text"><s>对比1</s></li>
                                <li><input type="text"><span>至</span><input type="text"><s>对比2</s></li>
                                <li><input type="text"><span>至</span><input type="text"><s>对比3</s></li>
                            </ul>
                        </div>

                    </li>
                </ul>-->
                <a href="javascript:void(0)" class="plus-datepicker" v-show="showAddRangeBtn" @click="addRange">+</a>
                <div class="r-options">
                    <div class="select-modal">
                        <span>正向有功</span>
                        <ul>
                            <li><a href="javascript:void(0)">正向有功</a></li>
                            <li><a href="javascript:void(0)">反向有功</a></li>
                        </ul>
                    </div>
                    <a href="javascript:void(0)" class="search-btn" @click="search"><span>查询</span></a>
                    <a href="javascript:void(0)" class="excel-btn">导出Excel</a>
                </div>
            </div>
            <div class="container-wrapper">
                <div class="container">
                    <div class="flex-box">
                        <div id="chart1">

                        </div>
                        <!--<div id="chart2">-->
                            <!--<h2>前6名数据</h2>-->
                            <!--<ul>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:95%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:85%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:80%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:70%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:65%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                                <!--<li>-->
                                    <!--<div class="inner"><p style="width:60%"></p></div>-->
                                    <!--<span>95%</span></li>-->
                            <!--</ul>-->
                        <!--</div>-->

                    </div>
                    <!--单设备,多时段 || 单时段 单设备 || 单时段 多设备-->
                    <div class="common-wrapper" v-show="!isManyDeviceAndManyDate">
                        <div class="inner">
                            <div class="title">{{subChartTitle}}</div>
                            <!--{searchType===0?'同环比用能对比':(searchType===3||searchType===4)?'多时段用能量对比':'单时段用能量'}-->
                            <div class="hd" v-if="!loadingFlag">
                                <p class="time">时段<br><span>日</span></p>
                                <ul>
                                    <li v-for="(cDate,$i) in compareDate">
                                        <p class="color-box" :style="bgColor($i)" v-if="searchType!==2"></p>
                                        <p class="date" v-text="cDate" :style="fontColor($i)"></p>
                                    </li>
                                </ul>
                                <p class="unit">单位<br><span>KWH</span></p>

                            </div>
                            <div class="bd">
                                <div class="table-wrapper">
                                    <div class="table-box">
                                        <table class="device-table"
                                               :width="$index===0?(searchType!==2?'100%':'400'):'350'" cellspacing="0"
                                               cellpadding="0"
                                               v-for="(device,$index) in multiDate">
                                            <thead>
                                            <tr>
                                                <th v-if="$index===0" width="80" style="background: rgb(14, 44, 55);"></th>
                                                <th>{{compareEquipment[$index]}}</th>
                                            </tr>
                                            </thead>
                                            <tbody v-if="searchType!==2 && searchType!==4">
                                            <tr v-for="(unit,$j) in device[0].Labels" class="searchType1">
                                                <th v-if="$index===0" width="80" v-text="getTime(unit)"></th>
                                                <td>
                                                    <ul>
                                                        <li v-for="(day,$k) in device">
                                                            <div class="color-box-wrapper"><p class="color-box"
                                                                                              :style="getWidth(day.Values[$j],$index,$k)"></p>
                                                            </div>
                                                            <span :style="fontColor($k)" class="value" v-text="day.Values[$j]"></span></li>

                                                    </ul>
                                                </td>

                                            </tr>
                                            </tbody>
                                            <tbody v-else>
                                            <tr v-for="(unit,$j) in device.Labels" class="searchType2">
                                                <th v-if="$index===0" width="80" v-text="getTime(unit)"></th>
                                                <td>
                                                    <ul>
                                                        <li>
                                                            <div class="color-box-wrapper"><p class="color-box"
                                                                                              :style="getWidth(device.Values[$j],$index,$index)"></p>
                                                            </div>
                                                            <span :style="fontColor($index)" class="value" v-text="device.Values[$j]"></span></li>

                                                    </ul>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="inner-scroll">

                        </div>
                    </div>

                <!--多设备多时段-->
                    <div class="common-wrapper" v-show="isManyDeviceAndManyDate">
                        <div class="inner">
                            <div class="title">设备{{compareEquipment.join(',设备')}}多时段用能量对比</div>
                            <div class="hd">
                                <p class="time">时段<br><span>日</span></p>
                                <ul>
                                    <li v-for="(cDate,$i) in compareDate" ><p class="color-box" :style="bgColor($i)"></p>
                                        <p class="date" v-text="cDate" :style="fontColor($i)"></p>
                                    </li>
                                </ul>
                                <p class="unit">单位<br><span>KWH</span></p>

                            </div>
                            <div class="bd">
                                <div class="table-wrapper">
                                    <div class="table-box">
                                        <table class="device-table" :width="$index===0?'400':'350'" cellspacing="0"
                                               cellpadding="0"
                                               v-for="(device,$index) in multipleDeviceData">
                                            <thead>
                                            <tr>
                                                <th v-if="$index===0" width="50" style="background: rgb(14, 44, 55);"></th>
                                                <th width="350">{{compareEquipment[$index]}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(unit,$j) in device.List[0].Labels">
                                                <th v-if="$index===0" v-text="getTime(unit)"></th>
                                                <td>
                                                    <ul>
                                                        <li v-for="(list,$k) in device.List" :class="colors[$k]">
                                                            <div class="color-box-wrapper"><p class="color-box"
                                                                                              :style="getWidth(list.Values[$j],$index,$k)"></p>
                                                            </div>
                                                            <span :style="fontColor($k)" class="value" v-text="list.Values[$j]"></span></li>

                                                    </ul>
                                                </td>

                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="inner-scroll">

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="loading" v-show="loadingFlag">
        <div class="svg-loading">
            <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="circle" class="g-circles g-circles--v1">
                    <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                            cy="16.6987298" r="10"></circle>
                    <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                            cx="16.6987298" cy="35" r="10"></circle>
                    <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                            r="10"></circle>
                    <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                            cx="16.6987298" cy="85" r="10"></circle>
                    <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                            cx="35" cy="103.30127" r="10"></circle>
                    <circle id="7" cx="60" cy="110" r="10"></circle>
                    <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                            cx="85" cy="103.30127" r="10"></circle>
                    <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                            cx="103.30127" cy="85" r="10"></circle>
                    <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                            r="10"></circle>
                    <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                            cx="103.30127" cy="35" r="10"></circle>
                    <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                            cy="16.6987298" r="10"></circle>
                    <circle id="1" cx="60" cy="10" r="10"></circle>
                </g>

                <use xlink:href="#circle" class="use"/>
            </svg>

        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.excheck.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/My97DatePicker/WdatePicker.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../js/common.js"></script>
</html>